<template>
  <c-form
    style="height: 80vh; overflow: auto"
    ref="formRef"
    label-width="100px"
    width="100%"
    isDialog
    :loading="loading"
    :model="formData"
    :rows="formRows"
    @submit="onSubmit"
    @reset="onReset"
  >
    <template #userInfoSlot>
      <div class="product">
        <el-image class="product-img" :src="formData.user_info.avatar" fit="cover" />
        <div class="product-right">
          <div class="product-name">
            {{ formData.user_info.nickname }}
          </div>
          <div class="product-score">ID：{{ formData.user_info._id }}</div>
          <div class="product-score">剩余积分：{{ formData.user_info.score }}</div>
        </div>
      </div>
    </template>

    <template #productInfoSlot>
      <div class="product">
        <el-image
          class="product-img"
          :src="formData.product_info?.product_imgs?.[0]"
          :preview-src-list="formData.product_info?.product_imgs"
          preview-teleported
          hide-on-click-modal
          fit="cover"
        />
        <div class="product-right">
          <div class="product-name">
            {{ formData.product_info.product_name }}
            <el-tag v-if="formData.product_info.is_new">新人专享</el-tag>
          </div>
          <div class="product-score">商品ID：{{ formData.product_info._id }}</div>
          <div class="product-score">积分：{{ formData.product_info.score_count }}</div>
        </div>
      </div>
    </template>

    <template #productDescSlot>
      <div style="width: 100%; height: 350px; padding-bottom: 20px">
        <QuillEditor
          ref="quillRef"
          v-model:content="formData.use_remark"
          :options="editorOptions"
          contentType="html"
        />
      </div>
    </template>
  </c-form>
</template>

<script setup name="mall-exchange-popup">
import { ref, computed, onMounted } from 'vue';
import { useForm } from '@/hooks/useForm';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { updateProductOrderUseRemark } from '@/apis/product.js';
import { ElMessage } from 'element-plus';
import { uploadFile } from '@/apis/user';
import dayjs from 'dayjs';

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

const emit = defineEmits(['refresh']);

const formRef = ref(null);

const quillRef = ref();

const editorOptions = {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      ['image', 'link'], // 自定义图片上传、文件上传
      [{ header: 1 }, { header: 2 }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }],
    ],
  },
};

const { loading, formData, submitForm } = useForm({
  initParams: {
    use_remark: '',
    user_info: {},
    product_info: {},
  },
});

const formRows = ref([
  {
    formType: 'slot',
    slot: 'userInfoSlot',
    prop: 'user_info',
    label: '用户信息：',
    required: false,
  },
  {
    formType: 'slot',
    slot: 'productInfoSlot',
    prop: 'product_info',
    label: '商品信息：',
    required: false,
  },
  {
    formType: 'text',
    prop: 'remark',
    label: '用户备注：',
    required: false,
  },
  {
    formType: 'text',
    prop: 'create_time',
    label: '下单时间：',
    required: false,
  },
  {
    formType: 'slot',
    slot: 'productDescSlot',
    prop: 'use_remark',
    label: '兑换信息：',
    required: false,
  },
]);

const onSubmit = async (values, instance) => {
  console.log(formData.value, 'formData');

  instance.loading = true;

  const res = await updateProductOrderUseRemark({
    ...formData.value,
  });

  if (res.code == 0) {
    ElMessage.success('兑换成功');
    modalStore.closeModal();
    emit('refresh');
  }

  instance.loading = false;
};

const onReset = () => {};

const initData = () => {
  const data = modalStore.getModal('mall-exchange-popup');

  console.log(data, 'data mall-exchange-popup');
  formData.value = data;
  formData.value.create_time = dayjs(data.create_time).format('YYYY-MM-DD HH:mm:ss');

  if (data._id) {
    formData.value._id = data._id;
    formData.value.use_remark = data.use_remark;
  }
};

onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.product {
  display: flex;
  align-items: center;
  line-height: 1.5;

  .product-img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .product-right {
    display: flex;
    flex-direction: column;
  }

  .product-name {
    font-size: 14px;
  }

  .product-score {
  }
}
</style>
